<template>
  <BasicDrawer v-bind="$attrs" :loadingText="vform.loadingText" showFooter title="ETL任务" width="70%"
               @ok="handleSubmit($refs.xForm, vform, emit, setDrawerProps, changeLoading, closeDrawer)" @register="registerDrawer">
    <vxe-form title-colon ref="xForm" title-align="right" title-width="100" :data="vform.data" :rules="vform.rules">
      <vxe-form-item title="ETL名称" field="name" :item-render="{}" span="12" title-width="150">
        <template #default="{ data }">
          <vxe-input v-model="data.name" clearable></vxe-input>
        </template>
      </vxe-form-item>
      <vxe-form-item title="ETL代码" field="code" :item-render="{}" span="12" title-width="150">
        <template #default="{ data }">
          <vxe-input v-model="data.code" clearable></vxe-input>
        </template>
      </vxe-form-item>

      <vxe-form-item title="任务表达式" field="cron" :item-render="{}" span="24" title-width="150">
        <template #default="{ data }">
          <vxe-input v-model="data.cron" clearable></vxe-input>
        </template>
      </vxe-form-item>
      <vxe-form-item title="ETL附件" field="cron" :item-render="{}" span="12" title-width="150">
          <Upload
              v-model:file-list="fileList"
              name="file"
              :multiple="false"
              :action="uploadUrl"
              @change="handleChange">
            <Button>
              <UploadOutlined></UploadOutlined>
              点击上传
            </Button>
          </Upload>
      </vxe-form-item>

      <vxe-form-item title="ETL附件" field="cron" :item-render="{}" span="12" title-width="150">
          <Button @click="handleDownload">
            <DownloadOutlined></DownloadOutlined>
            点击下载
          </Button>
      </vxe-form-item>

      <vxe-form-item title="ETL备注" field="notes" :item-render="{}" span="24" title-width="150">
        <template #default="{ data }">
          <vxe-textarea v-model="data.notes" placeholder="请输入备注" :autosize="{minRows: 4, maxRows: 6}" clearable></vxe-textarea>
        </template>
      </vxe-form-item>
      <vxe-form-item title="是否可用" field="avtag" :item-render="{}" span="12" title-width="150">
        <template #default="{ data }">
          <vxe-switch v-model="data.avtag" open-label="是" close-label="否"></vxe-switch>
        </template>
      </vxe-form-item>
      <vxe-form-item title="排序号" field="ornum" :item-render="{}" span="12" title-width="150">
        <template #default="{ data }">
          <vxe-input v-model="data.ornum" type="number"></vxe-input>
        </template>
      </vxe-form-item>
    </vxe-form>
  </BasicDrawer>
</template>
<script lang="ts" setup>
import {ref, computed, reactive, toRaw} from "vue";
import {BasicDrawer, useDrawerInner} from "/@/components/Drawer";
import {defHttp} from "/@/utils/http/axios";
import {VxeFormPropTypes, VxeFormInstance, VXETable} from "vxe-table";
import {handleSubmit} from "/@/comps/vxe/edit";
import {UploadOutlined,DownloadOutlined} from '@ant-design/icons-vue';
import {Upload} from 'ant-design-vue';
import {Button} from 'ant-design-vue';
import { useGlobSetting } from '/@/hooks/setting';

const {uploadUrl} = useGlobSetting();

const fileList = ref([]);

interface FileItem {
  uid: string;
  name?: string;
  status?: string;
  response?: any;
  url?: string;
}

interface FileInfo {
  file: FileItem;
  fileList: FileItem[];
}

const handleChange = (info: FileInfo) => {
  if (fileList.value.length >= 2) {
    fileList.value.shift();
  }
  // if (info.file.status !== 'uploading') {
  //   console.log(info.file, info.fileList);
  // }
  if (info.file.status === 'done') {
    console.log(info.file);
    vform.data.zname=info.file.name;
    vform.data.zpath=info.file.response.address+"/"+info.file.response.id+"."+info.file.response.sname;
    // console.log(`${info.file.name} file uploaded successfully`)
  } else if (info.file.status === 'error') {
    // console.log(`${info.file.name} file upload failed.`)
  }
  console.log(fileList);
};

const handleDownload = () => {
  if (vform.data.zpath) {
    const arr=vform.data.zpath.split("/");
    const { apiUrl } = useGlobSetting();
    location.href=apiUrl+'/gen/att/one/'+ arr[arr.length-1].split(".")[0];
  }
};

const emit = defineEmits(["success", "register"]);


const vform = reactive({
  loadingText: "",
  url: "/bi/etl/main",
  data: {} as any,
  rules: {
    name: [{required: true, message: "请输入名称"}]
  } as VxeFormPropTypes.Rules
});


const [registerDrawer, {setDrawerProps, changeLoading, closeDrawer}] = useDrawerInner(async (data) => {
  vform.loadingText = "加载中";
  changeLoading(true);
  if (data.record.id) {
    vform.data = await defHttp.get({url: vform.url + "/one/" + data.record.id});
  } else {
    vform.data = data.record;
    vform.data.avtag = true;
  }
  changeLoading(false);
});

</script>
